{%extends 'depto/base.html'%}	

{% block css-javascript-agregados %}
	<!-- SEXYSELECT -->
	<link 	type="text/css" 		href="static/ui.sexyselect/css/ui.sexyselect.0.55.css" 			rel="stylesheet"/>
	<script type="text/javascript" 	src="static/ui.sexyselect/js/ui.sexyselect.min.0.6.js" >		</script>	
	<!-- JQUERY-UI-TIMEPICKER -->		
	<link 	type="text/css" 		href="static/css/jquery-ui-timepicker.css" 			rel="stylesheet" />
	<script type="text/javascript" 	src="static/js/jquery.ui.timepicker.js ">			</script>	
{% endblock %}

{% block heading_content %}Detalles del Departamento{% endblock %}
{%block content%}
<br/>

<div id="tab">
	<form  method="POST" enctype="multipart/form-data">
		{% csrf_token %}
		<table>
		{{ form.as_table }}
		</table>
		<br/>
		<table>
	    	<input type="submit" class="find_link" value="Guardar" />
    </form>
			<form action="/comunidadcyt/departamentos/" method="GET">
			<input type="submit" class="find_link" value="Cancelar" />
			</form>
		</table>
</div>

<script type="text/javascript">     
	$("#tab").tabs();
	$("#id_Director").sexyselect({title:'Elegir director',allowInput:false,allowFilter:true,allowDelete:false,selectionMode:'single'});
	$("#id_Responsables").sexyselect({title:'Elegir responsables',allowInput:false,allowFilter:true,allowDelete:false,selectionMode:'multiple'});
	$("#id_Fecha_creacion").datepicker();
</script>

{%endblock%}


